<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: ui/dropdownlist.js</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: ui/dropdownlist.js</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>﻿
/** 下拉控件
 *
 * @tutorial Q.DropDownList
 *
 * @constructor
 * @param {Object} json - 构造参数
 * @param {string|dom} json.id - 渲染select元素id
 * @param {string} json.wstyle - 用户定义CSS样式
 * @param {function} json.on_change - 值变化事件回调
 */

Q.DropDownList = Q.extend({
hwnd: null,
drop_wnd: null,
ctrl: null,
__init__: function(json) {
  var _this = this;
  this.hwnd = document.createElement('BUTTON');
  this.hwnd.className = 'q-select';
  Q.addClass(this.hwnd, json.wstyle);
  this.on_change =  json.on_change || function(text, value) {};
  this.ctrl = Q.$(json.id);
  this.ctrl.parentNode.insertBefore(this.hwnd, this.ctrl);
  this.ctrl.onchange = ( function(o, c) {
    return function(evt) {
      Q.printf("ctrl onchage");
      o.on_item_changed(c.options[c.selectedIndex].text, c.options[c.selectedIndex].value);
    }
  })(this, this.ctrl);
  var bar = new Q.MenuBar();
  this.drop_wnd = new Q.Menu({
    style: json.wstyle, 
    on_popup: function(popup) {
      if(popup)
        Q.addClass(_this.hwnd, "checked");
      else
        Q.removeClass(_this.hwnd, "checked");
    }
  });
  if(this.ctrl.tagName.toLowerCase() == "select") {
    var len = this.ctrl.options.length;
    for(var i=0; i &lt; len; i++) {
      var m4 = new Q.MenuItem({text: this.ctrl.options[i].text, data: i, callback: Q.bind_handler(_this, _this.on_menu_clicked)});
      this.drop_wnd.addMenuItem(m4);
      if(i == this.ctrl.selectedIndex) {
        this.setValue(this.ctrl.options[i].value);
        this.setText(this.ctrl.options[i].text);
      }
    }
  }
  this.drop_wnd.hide(); 
  bar.append(this.hwnd, this.drop_wnd);
  if(json.value) {
    this.setValue(json.value);
  }
},

on_menu_clicked: function(menu) {
  Q.printf(menu.data);
  var index = menu.data;
  if(index == this.ctrl.selectedIndex) {
    return;
  } else {
    this.setValue(this.ctrl.options[index].value);
  }
},

on_item_changed : function(text, value) {
  this.setText(text);
  this.on_change(text, value);
},

/** 设置下拉显示文本
 *
 * @memberof Q.DropDownList.prototype
 * @param {string} text - 文本内容
 */
setText : function(text) {
  
  if(this.trim(this.hwnd.innerText) == this.trim(text)) {
    return false;
  } else {
    this.hwnd.innerText = this.trim(text);
  }

  return true;
},

/** 设置下拉控件值，不可见
 * 
 * @memberof Q.DropDownList.prototype
 * @param {string} value - 下拉控件值
 */
setValue : function(value) {
  var e = this.ctrl;
  var selected_index = this.ctrl.selectedIndex;
  for(var i=0;i&lt;e.options.length;i++) {
    if(e.options[i].value == value) {
      if(selected_index != i) {
        e.options[i].selected = true;
        this.on_item_changed(e.options[i].text, e.options[i].value)
        return true;
      }
      break;
    }
  }

  return false;
},
 
trim : function(s) {
  return s.replace(/&amp;nbsp;/, '');
},

}); // code end


</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Q.Application.html">Application</a></li><li><a href="Q.CheckBox.html">CheckBox</a></li><li><a href="Q.Dialog.html">Dialog</a></li><li><a href="Q.DropDownList.html">DropDownList</a></li><li><a href="Q.HashMap.html">HashMap</a></li><li><a href="Q.List.html">List</a></li><li><a href="Q.List.Node.html">Node</a></li><li><a href="Q.Menu.html">Menu</a></li><li><a href="Q.MenuBar.html">MenuBar</a></li><li><a href="Q.MenuItem.html">MenuItem</a></li><li><a href="Q.Slider.html">Slider</a></li><li><a href="Q.Store.html">Store</a></li><li><a href="Q.Table.html">Table</a></li><li><a href="Q.UI.html">UI</a></li><li><a href="Q.UIApplication.html">UIApplication</a></li><li><a href="Q.Window.html">Window</a></li></ul><h3>Namespaces</h3><ul><li><a href="Q.html">Q</a></li></ul><h3>Global</h3><ul><li><a href="global.html#CONST">CONST</a></li><li><a href="global.html#end">end</a></li><li><a href="global.html#hwnd">hwnd</a></li><li><a href="global.html#item">item</a></li><li><a href="global.html#MENU_SEPERATOR">MENU_SEPERATOR</a></li><li><a href="global.html#MESSAGE">MESSAGE</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0</a> on Sun May 24 2015 11:21:15 GMT+0800 (中国标准时间)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>
